<template>
<div>
    <div>
        <Top/>
    </div>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../assets/css/jpetstore.css" type="text/css">
</head>
<body>
<div th:replace="../../common/top.html"/>

<div id="Content">
    <div id="Catalog">

        <h2>{{ $route.params.CategoryId}}</h2>


        <table>
            <tr>
                <th>Product ID</th>
                <th>Name</th>
            </tr>
            <!-- 循环 -->
            <tr v-for="item in category">
                <td>
                    <a :href="'/catalog/products/'+item.productId+'/items'">{{item.productId}}</a>
                </td>
                <td>
                    {{item.name}}
                </td>
            </tr>
        </table>
    </div>
</div>

<div th:replace="../../common/bottom"/>
</body>
</html>
<div>
    <Bottom/>
</div>
</div>
</template>
<script>
import Top from '../../common/top'
import Bottom from '../../common/bottom'

export default {
    name: "category",
    data() {
        return {
            status:"0",
            category:[]
        }
    },
    created () {
        console.log("hhhh")
        const _this = this
        //这句话将route中的参数传递到category中
         const url = this.$route.params.CategoryId
         console.log(url)
        axios.get("http://localhost:8081/catalog/categories/"+url+"/products").then(function(resp){
              console.log(resp)
              _this.category = resp.data.data
          })  
    },
     components: {
         Bottom,
        Top
       
    }
    

}
</script>
<style scoped>

</style>